import React, { useEffect } from 'react';
import userStore from "../../../context/useStore";
import { Table, Select, Button, Space, Tabs } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import "./paper.css"
/* JavaScript 日期处理类库 */
/* import moment from 'moment'; */
import { useObserver } from 'mobx-react-lite';
const { TabPane } = Tabs;
const { Option } = Select;


const PaperList: React.FC = () => {
	const { exam, questions } = userStore();


	useEffect(() => {
		/* 获取所有的考试类型 */
		questions.getExamTypeAction();
		//获取所有课程类型
		questions.getSubjectListAction();
		exam.getPaperlistAction();
	}, [questions, exam])


	// let  exam_id= '';
	let addItem = {
		subject_id: '',
		exam_id: '',
	}

	const columns = [
		{
			title: '试卷信息',
			dataIndex: 'title',
			key: 'exam_exam_id',
			//   render: (text: React.ReactNode) => <span>{text}</span>,
		},
		{
			title: '班级',
			dataIndex: 'questions_type_text',
			key: 'questions_type_sort',
			render: (record: any) => (
				<Space size="middle">
					<button /* onClick={() => { delType(record.questions_type_id) }} */>详情</button>
				</Space>
			),
		},
		{
			title: '创建人',
			dataIndex: 'user_name',
			key: 'action'
		},
		{
			title: '开始时间',
			dataIndex: 'start_time',
			key: 'start_time',
		}, {
			title: '结束时间',
			dataIndex: 'end_time',
			key: 'end_time',
		}, {
			title: '操作',
			dataIndex: 'questions_type_text',
			key: 'questions_type_sort',
			render: (record: any) => (
				<Space size="middle">
					<button /* onClick={() => { delType(record.questions_type_id) }} */>详情</button>
				</Space>
			),
		},
	]

	/* moment(parseInt(value.startTime)).format('YYYY/MM/DD hh:mm:ss') */

	function handleChangeExam(value: string) {
		addItem.exam_id = value;
	};
	function handleChangeSub(value: string) {
		addItem.subject_id = value;

	}

	return useObserver(() => <div>
		<h2>试卷列表</h2>
		<div className="append">
			{/* 查询考试类型 */}
			<div className="type">
				<span>考试类型:</span>
				<Select style={{ width: 190 }} onChange={handleChangeExam}>
					{
						questions.examTypeList.map((item: any) => {

							return <Option value={item.exam_id} key={item.exam_id}>{item.exam_name}</Option>
						})
					}
				</Select>
			</div>
			{/* 查询课程类型 */}
			<div className="course">
				<span>题目类型:</span>
				<Select style={{ width: 190 }} onChange={handleChangeSub}>
					{
						questions.subjectList.map((item: any) => {
							/*  console.log('课程类型。。。', item); */
							return <Option value={item.subject_id} key={item.subject_id}>{item.subject_text}</Option>
						})
					}
				</Select>
			</div>
			<Button className="button" type="primary" style={{ width: 130, background: "4e75ff" }}  ><SearchOutlined />查询</Button>
		</div>
		<div className="list">
			<div className="taber">
				<div className="site-page-header-ghost-wrapper">
					<span className="classspan">试卷列表</span>
					<Tabs type="card" className="Tab">

						<TabPane tab="全部" key="1">
						</TabPane>
						<TabPane tab="进行中" key="2">
						</TabPane>
						<TabPane tab="已结束" key="3">

						</TabPane>
					</Tabs>
				</div>
				<div className="Table">
					<Table rowKey={columns[0].key} columns={columns} dataSource={exam.pageListData} />
				</div>
			</div>
		</div>
	</div>
	);
}

export default PaperList;

